@extends('admin.common.base-master')

@section('html-head')
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script type="text/javascript" src="//code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>

    <link href="{{url('js/lib/jquery-ui-timepicker-addon.css')}}" type="text/css" />
    <script src="{{url('js/lib/jquery-ui-timepicker-addon.js')}}" type="text/javascript"></script>
    <script src="{{url('js/lib/jquery.ui.datepicker-zh-CN.js')}}" type="text/javascript"></script>
    <script src="{{url('js/lib/jquery-ui-timepicker-zh-CN.js')}}" type="text/javascript"></script>

    <link href="{{url('css/admin/pagenum.css')}}" rel="stylesheet" />
    <script src="{{url('vendors/layer/layer.js')}}"></script>
    <script src="{{url('vendors/layui/layui.js')}}" charset="utf-8"></script>
    <link rel="stylesheet" href="{{url('vendors/layui/css/layui.css')}}"  media="all">
@endsection

@section('html-body')
    <!-- content start -->
    <div id="content">
        <!-- cur-position start -->
        <div id="cur-position">
            <span class="tit">当前位置：</span>
            <a href="#">订单管理</a>
        </div>
        <!-- cur-position end -->

        <div class="filter-box clearfix">

            <div class="fr">
                {{--<div class="sx">--}}
                    <span>选用同步账号：</span>
                    <select id="shop_account" style="padding: 3px;margin-right: 5px">
                        @if(count($shop_infos)>0)
                            @foreach($shop_infos as $shop_info)
                            <option value="{{$shop_info->id}}">{{$shop_info->s_user_nick}}</option>
                            @endforeach
                        @endif
                    </select>
                    {{--<div class="sx">--}}
                        {{--<span>同步周期：</span>--}}
                        {{--<input class="gg-ipt" style="width: 180px;height: 26px" placeholder="请选择开始时间" name="the_time" id="start_time" value="" />---}}
                        {{--<input class="gg-ipt" style="width: 180px;height: 26px" placeholder="请选择结束时间" name="end_time" id="end_time" value="" />--}}
                    {{--</div>--}}
                    <span>同步周期：</span>
                    <select id="day" style="padding: 3px;margin-right: 5px">
                        <option value="1" selected>24小时内</option>
                        <option value="3">前3天</option>
                        <option value="7">前1周</option>
                        <option value="30">前1个月</option>
                        <option value="89">前3个月</option>
                    </select>
                {{--</div>--}}
                <a class="addBtn" href="javascript:;" id="syn_order">手动同步</a>
            </div>
        </div>
        <div style="margin-top: 15px">
            @if($synch && $synch->status == 1)
            <div>{{$synch->message}}，最后更新时间:<span style="color: #ff721a">{{$synch->created_at}}</span>，有更新的订单
                <span style="color: #ff2f4d">{{$synch->all_order_num}}</span>条，新增订单
                <span style="color: #ed26ff">{{$synch->new_order_num}}</span>条，新增会员
                <span style="color: #5689ff">{{$synch->new_vip_num}}</span>个。
                下一次更新：<span style="color: #ff0c0b" id="countTime"></span>
            </div>
                @elseif($synch && $synch->status == 0)
                <div>{{$synch->message}}，最后更新时间:<span style="color: #ff721a">{{$synch->created_at}}</span>，错误原因：
                    <span>{{$synch->message}}</span>
                </div>
                @else
                <div>无更新内容</div>
            @endif
        </div>
        <div class="table-box">
            <table class="table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>会员昵称</th>
                    <th>商品图片</th>
                    <th>商品名称</th>
                    <th>收货人</th>
                    <th>收货地址</th>
                    <th>手机号</th>
                    <th>数量</th>
                    <th>交易金额</th>
                    <th>订单编号</th>
                    <th>订单创建时间</th>
                    <th>订单状态</th>
                    <th>订单支付时间</th>
                    <th>是否新会员</th>
                    <th>订单来源</th>
                </tr>
                </thead>
                <tbody id="fansinfo">
                @if(count($orders) > 0)
                    @foreach($orders as $order)
                        <tr id="order_{{$order->id}}">
                            <td>{{$order->id}}</td>
                            <td>{{$order->buyer_nick}}</td>
                            <td>
                                <div class="info-box" style="width: 50px">
                                  <img style="width: 100%;" src="{{$order->pic_path}}" />
                                </div>
                            </td>
                            <td>{{$order->title}}</td>
                            <td>{{$order->receiver_name}}</td>
                            <td>{{$order->receiver_state}}{{$order->receiver_town}}{{$order->receiver_address}}</td>
                            <td>{{$order->receiver_mobile}}</td>
                            <td>{{$order->num}}</td>
                            <td>{{$order->payment}}</td>
                            <td>{{$order->num_iid}}</td>
                            <td>{{$order->created}}</td>
                            <td>{{$order->status}}</td>
                            <td>{{$order->pay_time}}</td>
                            <td>
                                @if(isset($order->user) && (int)$order->user->is_new == 0)
                                    <span class="color3">老会员</span>
                                @else
                                    <span class="color4">新会员</span>
                                @endif
                            </td>
                            <td>
                                @if($order->from_type == 'admin_add')
                                    <span class="color4">人工新增</span>
                                @elseif($order->from_type == 'tmall')
                                    <span class="color4">天猫</span>
                                @elseif($order->from_type == 'user_add')
                                    <span class="color4">用户填写</span>
                                @elseif($order->from_type == 'jd')
                                    <span class="color4">京东</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
            </table>
            <?php echo $orders->render(); ?>
            <input type="hidden" id="new_auth" value="{{$new_auth}}" />
        </div>
    </div>
    <!-- content end -->
    <script>
        $(function(){

            jQuery('#start_time').datetimepicker({
                timeFormat: "HH:mm:ss",
                dateFormat: "yy-mm-dd",
                beforeShow: function () {
                    setTimeout(
                        function () {
                            $('#ui-datepicker-div').css("z-index", 1000);
                        }, 100
                    );
                }
            });

            jQuery('#end_time').datetimepicker({
                timeFormat: "HH:mm:ss",
                dateFormat: "yy-mm-dd",
                beforeShow: function () {
                    setTimeout(
                        function () {
                            $('#ui-datepicker-div').css("z-index", 1000);
                        }, 100
                    );
                }
            });

            loading();
            function loading(){
                var new_auth = $("#new_auth").val();
                // var startTime = $("#startTime").val();
                // var endTime = $("#endTime").val();

                if(new_auth != "" && parseInt(new_auth) != 0){
                    // $("#start_time").val(startTime);
                    // $("#end_time").val(endTime);
                    $('#syn_order').click();
                }

                getSynchMsg("ini");
            }

            $('#syn_order').click(function(){
                var shop_account = $('#shop_account').val();
                var day = $('#day').val();
                var new_auth = $("#new_auth").val();
                // var startTime = $("#start_time").val();
                // var endTime = $("#end_time").val();

                if(new_auth != "" && parseInt(new_auth) != 0){
                    shop_account = new_auth;
                }

                var index = layer.load(1, {
                    shade: [0.5,'#fff'] //0.1透明度的白色背景
                });

                $.ajax({
                    type:"post",
                    url:'{{route('Api.Ali.getOrderData')}}',
                    dataType:"json",
                    data:{
                        "shop_info_id":shop_account,
                        "day":day,
                    },
                    success:function(obj){
                        layer.close(index);
                        if(obj.level == "success"){
                            layer.alert(obj.message+"，共新增订单数["+obj.data+"]条", {
                                skin: 'layui-layer-molv' //样式类名
                                ,closeBtn: 0
                            }, function(){
                               window.location.reload();
                            });
                        }else {
                            if(obj.data == 'to_auth'){
                                var openUrl = "{{route('Api.Ali.toAuth')}}";
                                window.open(openUrl);
                            }else {
                                layer.msg(obj.message);
                            }
                        }
                    },
                    error:function(obj){
                        var datajson = obj.responseJSON;
                        layer.msg(datajson.message);
                    }
                });
            });

            var interval2 = setInterval(function(){
                getSynchMsg("xh");
            },3000);

            function getSynchMsg(type) {
                $.ajax({
                    type:"get",
                    url:'{{route('Api.Ali.getSychMsg')}}',
                    dataType:"json",
                    success:function(obj){
                        if(obj.level == "success"){
                            if(obj.data == 1){
                                window.location.reload();
                            }else {
                                if(type == "ini"){
                                    countDown(obj.second);
                                }
                            }
                        }else {
                            layer.msg(obj.message);
                        }
                    },
                    error:function(obj){
                        var datajson = obj.responseJSON;
                        layer.msg(datajson.message);
                    }
                });
            }

            function countDown(second){
                var time = second;
                var h=0;
                var m=parseInt(time/60);
                var s=time%60-1;
                var realTime;
                var interval = setInterval(function(){
                    --s;
                    if(s<0){
                        --m;
                        s=59;
                    }
                    if(m<0){
                        --h;
                        m=59;
                    }
                    if(h<0){
                        m=0;
                        s=0;
                        h=0;
                    }
                    if(h<10){
                        realTime="0"+h+":";
                    }else if(h<0){
                        realTime="00"+":";
                    }else{
                        realTime=h+":"
                    }
                    if(m<10){
                        realTime = realTime+"0"+m+":";
                    }else if(m<0){
                        realTime = realTime+"00"+":";
                    }else{
                        realTime = realTime+m+":";
                    }
                    if(s<10){
                        realTime = realTime+"0"+s;
                    }else if(m<0){
                        realTime = realTime+"00";
                    }else{
                        realTime = realTime+s;
                    }
                    $('#countTime').html(realTime);
                    second--;
                    if(second <= 0){
                        clearInterval(interval);
                    }
                },1000)
            }
        });
    </script>
@endsection